<template>
	<div class="nav_item">
		<div class="tag_box" ref="box" @mousewheel="wheel">
			<div class="tags" v-for='item in tagsList' :key='item.index'  :class="isActive(item)?'active':''">
				<router-link  :to='item.index' @contextmenu.prevent.native="openMenu(item,$event)">{{item.title}}</router-link>
				 <span class="el-icon-close" @click="delRouter(item)"></span>
			</div>
		</div>
		<ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
			<li @click="loadRoute(selectedTag)">刷新</li>
			<li @click="delRouter(selectedTag)">关闭</li>
			<li @click="closeOthers(selectedTag)">关闭其他</li>
			<li @click="closeAll(selectedTag)">关闭所有</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				selectedTag: {},
				top: 0,
				left: 0,
				visible:false,
				list:[]
			};
		},
		 props: ["tagsList"],
		watch: {
			// 监听路由
			$route() {
			},
			//点击body时关闭右键内容
			visible(value) {
				if (value) {
					document.body.addEventListener('click', this.closeMenu)
				} else {
					document.body.removeEventListener('click', this.closeMenu)
				}
			}
		},
		methods: {
			// 滑动
			wheel(even) {
				if (even.wheelDelta > 0) {
					this.$refs.box.scrollLeft -= 10
				} else {
					this.$refs.box.scrollLeft += 10
				}
			},
			// 样式
			isActive(item) {
				// console.log(item.index === this.$route.path)
				return item.index === this.$route.path;
			},
			// 删除
			delRouter(route) {
				 this.$emit("delRouter", route);
			},
			// 右键
			openMenu(item, e) {
				this.visible = true
				this.selectedTag = item;
				//获取点击的坐标
				let offsetLeft = this.$el.getBoundingClientRect().left;
				this.left = e.clientX-20
				this.top = e.clientY-20
			},
			// 关闭
			closeMenu() {
				this.visible = false
			},
			// 关闭其他
			closeOthers(route) {
				 this.$emit("closeOthers", this.selectedTag);
			},
			// 刷新
			loadRoute(item) {
				// this.$nextTick(()=>{
					this.$router.push('/page')
				// })
			},
			closeAll() {
				this.$emit("closeAll");
			}
		},
		created() {		
		}
	}
</script>

<style lang="less" scoped>
	.tag_box {
		white-space: nowrap;
		// position: relative;
		overflow: hidden;
		width: 100%;
		// padding: 3px 20px;
		box-sizing: border-box;
		align-items: center;
	}
	
	.tags {
		display: inline-block;
		position: relative;
		cursor: pointer;
		margin-right: 10px;
		padding: 5px 10px;
		border: 1px solid #d8dce5;
		background: rgba(255, 255, 255, 0.8);
		 font-size: 12px;
		border-radius: 3px;
		
		box-sizing: border-box;
       a{
		   color: #495060;
		   text-decoration: none;
	   }
	}
	
	.active {
		display: inline-block;
		position: relative;
		background: #409EFF;
		margin-right: 10px;
		padding: 5px 10px;
		font-size: 12px;
		box-sizing: border-box;
		border-radius: 4px;
		color: #fff;
		cursor: pointer;
	  a{
	  	color: #fff;
		text-decoration: none;
	  }
	}
	
	.active:before {
		content: "";
		background: #fff;
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		position: relative;
		margin-right: 4px;
	}
	
	.tags .el-icon-close {
		width: 16px;
		height: 16px;
		vertical-align: 2px;
		border-radius: 50%;
		text-align: center;
		transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		transform-origin: 100% 50%;
		margin-left: 3px;
	}
	
	.tags .el-icon-close:before {
		transform: scale(0.6);
		display: inline-block;
		vertical-align: -3px;
	}
	
	.tags .el-icon-close:hover {
		background-color: #f9470b;
		color: #fff;
	}
	
	.main-content {
		width: 100%;
		height: calc(100% - 35px);
		overflow-x: hidden;
		overflow-y: auto;
		background: #fff;
	}
	
	.main-content::-webkit-scrollbar {
		display: none;
		width: 0 !important;
	}
	.nav_item .contextmenu {
		margin-top: 20px;
		margin-left: 20px;
		background: #fff;
		z-index: 9999;
		position: absolute;
		list-style-type: none;
		padding: 5px 0;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #333;
		box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
	
		li {
			margin: 0;
			padding: 7px 16px;
			cursor: pointer;
			z-index: 9999;
	
			&:hover {
				background: #eee;
			}
		}
	}
</style>
